<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://shiro.apache.org/tags" prefix="shiro" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1, maximum-scale=1">
</head>
<body>
<div class="layui-form" style="width:100%;margin-top: 20px;">
    <blockquote class="layui-elem-quote quoteBox">
        <shiro:hasPermission name="crm:category:list">
            <label style="margin-left: 20px;" style="" class="layui-label">类别名称：</label>

            <div style="width: 200px;" class="layui-inline">
                <input id="categoryName" type="text" name="name" placeholder="请输入类别名称"
                       autocomplete="off" class="layui-input">
            </div>

            <button style="margin-left: 20px;" id="searchBtn" class="layui-btn"
                    type="button" lay-filter="roleForm">搜索
            </button>
        </shiro:hasPermission>
        <shiro:hasPermission name="crm:category:add">
            <button id="addBtn" class="layui-btn layui-btn-normal">添加</button>
        </shiro:hasPermission>

    </blockquote>
</div>
<script type="text/html" id="btnGroup">
    <shiro:hasPermission name="crm:category:add"><a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a></shiro:hasPermission>
    <shiro:hasPermission name="crm:category:remove"><a class="layui-btn layui-btn-danger layui-btn-xs"
                                         lay-event="delete">删除</a></shiro:hasPermission>
</script>
<table id="categoryTable" lay-filter="categoryTable"></table>
<!-- 编辑添加框 -->
<!-- form外面要有一个div-->
<div id="myform-div" class="layui-hide">
    <form class="layui-form" lay-filter="myform">
        <div style="margin-top: 15px;" class="layui-form-item">
            <label class="layui-form-label">分类编号：</label>
            <div class="layui-input-inline">
                <input type="text" name="id" readonly="readonly" style="width: 250px;"
                       placeholder="由系统设置" autocomplete="off" class="layui-input"/>
            </div>
        </div>
        <div style="width:100%;" class="layui-form-item">
            <label class="layui-form-label">分类名称：</label>
            <div class="layui-input-inline">
                <input type="text" name="name" lay-verify="required" style="width: 250px;"
                       placeholder="请输入分类名称" autocomplete="off" class="layui-input"/>
            </div>
        </div>
        <div style="width:100%;" class="layui-form-item">
            <label class="layui-form-label">分类描述：</label>
            <div class="layui-input-inline">
                    <textarea name="description" style="width: 250px; height:120px;"
                              placeholder="请输入分类描述" class="layui-textarea"></textarea>
            </div>
        </div>
        <button type="button" lay-submit lay-filter="formSubmit"
                id="submitButton" class="layui-hide"></button>
    </form>
</div>


</body>

<!-- 引入treejs -->
<script type="text/javascript" src="./layui/layui-xtree.js"></script>
<script>
    layui.use(['table', 'form', 'tree', 'layer'], function () {
        var formUrl = null;
        var table = layui.table;
        var form = layui.form;
        var layer = layui.layer;
        var $ = layui.$;

        var curPage;

        //加载表格数据
        var tableload = layer.load(2);
        table.render({
            elem: '#categoryTable', //指定原始表格元素选择器（推荐id选择器）
            url: '${pageContext.request.contextPath}/product/findCategoryList',
            even: true,
            id: 'categoryTable',
            cols: [[
                // {
                //     type: 'numbers',
                //     width: "4%"
                // },
                {
                    field: "id",
                    title: "类别编号",
                    width: "10%",
                    sort: true
                },
                {
                    field: "name",
                    width: "15%",
                    title: "类别名称"
                },
                {
                    field: "description",
                    width: "50%",
                    title: "类别描述"
                },
                {
                    fixed: 'right',
                    title: "操作",
                    align: 'center',
                    width: "18%",
                    toolbar: '#btnGroup'
                }
            ]],
            edit: "text", //单元格编辑类型（默认不开启）目前只支持：text（输入框）
            limit: 10,
            limits: [10, 25, 50],
            loading: true, //分页加载样式
            page: true, //是否开启分页
            done: function (res, curr, count) {
                layer.close(tableload);
                curPage = curr; //当前页
            }
        });

        table.on('tool(categoryTable)', function (obj) {
            var data = obj.data;
            if (obj.event === 'edit') {
                updateCategory(data);
            } else if (obj.event === 'delete') {
                layer.confirm('确定要删除该分类吗？', function (index) {
                    layer.close(index);
                    deleteCategory(data);
                });
            }
        });

        function updateCategory(data) {
            //设置password为自定义检验
            showCategoryDiv('编辑产品分类');
            console.log(data.id);
            //设置值
            form.val('myform', {
                "id": data.id,
                "name": data.name,
                "description": data.description
            });

            formUrl = "product/editCategory";
        }

        //监听表单提交按钮
        form.on('submit(formSubmit)', function (data) {
            var but = data.elem; //获取点击的按钮
            var loadanima = null;
            var formdata = data.field; //读取form表单中的数据 ,键值对形式

            $.ajax({
                type: "POST",
                url: formUrl,
                data: formdata,
                dataType: "json",
                //请求前执行
                beforeSend: function () {
                    //给按钮添加禁用样式
                    but.className += " layui-btn-disabled";
                    //console.log(but.className);
                    //显示加载动画
                    loadanima = layer.load(2);
                },
                //请求完成执行，无论请求是否成功
                complete: function () {
                    //去除禁用属性
                    but.className = but.className.replace("layui-btn-disabled", "");
                    //关闭加载动画
                    layer.close(loadanima);
                },
                success: function (data) {
                    if (data.success) { //成功
                        //隐藏表单
                        hideDiv();
                        //操作成功 重新加载表格数据
                        layui.layer.open({
                            content: '操作成功!',
                            btn: ['确认'],
                            yes: function (index, layero) {
                                //执行重载
                                layer.closeAll();
                                table.reload('categoryTable');
                            },
                            cancel: function () {
                                //执行重载
                                layer.closeAll();
                                table.reload('categoryTable');
                            },
                        })
                    } else { //失败
                        //隐藏表单
                        hideDiv();
                        //操作成功 重新加载表格数据
                        layui.layer.open({
                            content: '操作失败!',
                            btn: ['确认'],
                            yes: function (index, layero) {
                                layer.closeAll();
                            },
                            cancel: function () {
                                //执行重载
                                layer.closeAll();
                            },
                        });
                    }

                },
                error: function () {
                    layer.msg("服务器开小差了，请稍后再试...");
                }
            });
            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });

        function hideDiv() {
            layer.closeAll('page');
        }

        //显示添加表单
        function showCategoryDiv(title) {
            var html = '';
            var window = layer.open({
                type: 1,
                title: title,
                closeBtn: 2,
                area: ['400px', '360px'],
                btn: ['确定', '取消'],
                btn1: function () {
                    $("#submitButton").click();
                },
                shadeClose: false,
                content: '<div id="show-form-div"></div>',
                end: function () {
                    $('#myform-div').html(html);
                }
            });
            html = $('#myform-div').html();
            $('#myform-div').html("");
            $('#show-form-div').html(html);
            return window;
        }

        //搜索功能
        var active = {
            reload: function () {
                var name = $("#categoryName").val();
                //执行重载
                table.reload('categoryTable', {
                    page: {
                        curr: 1 //重新从第 1 页开始
                    },
                    where: {
                        "name": name
                    }
                });
            }
        };
        $('#searchBtn').on('click', function () {
            active['reload'] ? active['reload'].call(this) : '';
        });


        function deleteCategory(data) {
            var load = null;
            $.ajax({
                type: "POST",
                url: "${pageContext.request.contextPath}/product/deleteCategory",
                data: {
                    "id": data.id
                },
                dataType: "json",
                //请求前执行，无论请求是否成功
                beforeSend: function () {
                    //显示加载动画
                    load = layer.load(2);
                },
                complete: function () {
                    //关闭加载动画
                    layer.close(load);
                },
                success: function (data) {
                    if (data.success) {
                        //隐藏表单
                        hideDiv();
                        //操作成功 重新加载表格数据
                        layui.layer.open({
                            content: '删除成功!',
                            btn: ['确认'],
                            yes: function (index, layero) {
                                //执行重载
                                layer.closeAll();
                                table.reload('categoryTable', {
                                    page: {
                                        curr: 1 //重新从第 1 页开始
                                    }
                                });
                            },
                            cancel: function () {
                                //执行重载
                                layer.closeAll();
                                table.reload('categoryTable', {
                                    page: {
                                        curr: 1 //重新从第 1 页开始
                                    }
                                });
                            },
                        })
                    }
                },
                error: function () {
                    //隐藏表单
                    hideDiv();
                    //操作成功 重新加载表格数据
                    layui.layer.open({
                        content: '删除失败!',
                        btn: ['确认'],
                        yes: function (index, layero) {
                            layer.closeAll();
                        },
                        cancel: function () {
                            layer.closeAll();
                        },
                    })
                }
            });
        }

        //点击添加按钮后的处理
        $('#addBtn').click(function () {
            //显示表单
            showCategoryDiv('添加分类');
            //设置值
            form.val('myform', {
                "id": "",
            });
            //设置form表单提交地址
            formUrl = "product/addCategory"; //重要，必填属性
        });
    });
</script>
</html>